<template>
    <div class="pager">
        <LeftOutlined @click="toPre" class="page"  />
        <div v-for="i in list()" @click="change(i)"
        :class="{'active': i == pageNum}"
        class="page">{{ i == 0 ? '...' : i }}</div>
        <RightOutlined @click="toNext" class="page" />
    </div>
</template>
<script setup lang="ts">
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
const props = defineProps<{
    pageSize: number,
    total: number
}>()
const pageNum = defineModel<number>('pageNum', {default: 1})
const emit = defineEmits<{
    change: [number]
}>()

const list = () => {
    let pageCount = Math.ceil(props.total / props.pageSize)
    let arr = [pageNum.value]
    for(let i = 1; i <= 3; i++){
        let pre = pageNum.value - i
        let next = pageNum.value + i

        if(pre > 0){
            arr.unshift(pre)
        }

        if(next <= pageCount){
            arr.push(next)
        }
    }
    // arr.unshift(1)
    // arr.push(pageCount)

    if(arr[0] != 1){
        arr.unshift(1)
    }
    if(arr[arr.length - 1] != pageCount){
        arr.push(pageCount)
    }

    if(arr[1] && arr[1] != 2){
        arr.splice(1, 0, 0)
    }

    if(arr[arr.length - 2] && arr[arr.length - 2] != pageCount - 1){
        arr.splice(arr.length - 1, 0, 0)
    }

    return arr
}

const toPre = () => {
    if(pageNum.value == 1){
        return
    }
    pageNum.value --
    emit('change', pageNum.value)
}

const toNext = () => {
    let pageCount = Math.ceil(props.total / props.pageSize)
    if(pageNum.value == pageCount){
        return
    }
    
    pageNum.value ++
    
    emit('change', pageNum.value)
}

const change = (i:number) => {
    if(i == 0){
        return
    }
    pageNum.value = i
    emit('change', i)
}
</script>
<style scoped >
.pager{
    text-align: right;
}
.page{
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    color: var(--primary-color);
    padding: 4px 12px;
}
.page.active {
    color: #fff;
    background: var(--primary-color);
}
</style>